<template>
   <div class="kecheng">
    <div class="kecheng1">
<el-button type="primary" @click="isshow = true" class="btn">添加班级</el-button>
<el-button type="danger"  class="btn" @click="delebanji">删除班级</el-button>
 <el-button type="info" class="btn1" @click="()=>{this.$router.push('/home-2-1-2')}">退出</el-button>
<el-dialog title="添加班级" :visible.sync="isshow">
   <el-select v-model="value" multiple  placeholder="请选择">
    <el-option
      v-for="item in getallbanji"
      :key="item.cid"
      :label="item.className"
      :value="item.cid">
    </el-option>
  </el-select>
  <div slot="footer" class="dialog-footer">
    <el-button @click="isshow = false">取 消</el-button>
    <el-button type="primary" @click="addbanji">确 定</el-button>
  </div>
</el-dialog>
    </div>
    <h2>课程名称：{{this.canshu.courseName}}</h2>
<!-- 班级列表区域 -->
    <div class="kecheng2">
 <el-table
    :data="banjilist"
    border
     @selection-change="handleSelectionChange"
    style="width: 100%">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="cid"
      label="班级id"
      width="180">
    </el-table-column>
    <el-table-column
      prop="className"
      label="班级名称"
      width="180">
    </el-table-column>
   
  </el-table>
    </div>
   </div>
</template>

<script>
import { http } from '@/uitl/request'
export default {
    created(){
this.getbanji()
//this.$router.go()
    },
    data(){
        return{
          canshu:this.$route.query,
          banjilist:[],
          del:[] ,
          isshow:false ,
          getallbanji:[],
          value:[]
        }
    },
    methods:{
//获取课程对应的班级
async getbanji(){
try {
    const {data:res}=await http.post('/class/getClassList',{courseId:this.canshu.courseId})
    if(!res.data) {
              this.$message.error(res.msg)
              return
  }
    this.banjilist=res.data
     const banji=await http.post('/class/getClassList')
     this.getallbanji=banji.data.data
     //console.log(this.getallbanji);
} catch (err) {
    Promise.reject(err)
}
},
//获取删除的信息
  handleSelectionChange(val) {
        this.del = val;
      },
//删除班级
async delebanji(){
    const arr=[]
    this.del.map(ite=>{
        arr.push(ite.cid)
    })
    console.log(arr);
    try {
        const {data:res} =await http.post(`/course/updateCourseClass/${this.canshu.courseId}`,arr)
        if(!res.data) {
              this.$message.error(res.msg)
              return
  }
       this.$message({type:'success',message:res.data})
       const list=await http.post('/class/getClassList',{courseId:this.canshu.courseId})
    this.banjilist=list.data.data
    } catch (err) {
        Promise.reject(err)
    }
},
//添加班级
 async addbanji(){
    // const arr=[]
    // arr.push(this.value)
     try {
         const {data:res}=await http.post(`/course/addClass/${this.canshu.courseId}`,this.value)
         if(!res.data) {
              this.$message.error(res.msg)
              return
  }
         this.$message({type:'success',message:res.data})
         this.isshow=false
        const list=await http.post('/class/getClassList',{courseId:this.canshu.courseId})
    this.banjilist=list.data.data
     } catch (err) {
       Promise.reject(err)  
     }
 }
    }
}
</script>

<style scoped>
.kecheng{
    line-height: 25px;
}
.btn{
    float: left;
}
.btn1{
    float: right;
}
</style>